<template>
  <f7-page class="user-center">
    <!-- <f7-navbar>
      <f7-nav-left>
        <f7-link back icon-material="arrow_back"></f7-link>
      </f7-nav-left>
      <f7-nav-title>我的资料</f7-nav-title>
      <f7-nav-right>
        <f7-link href="/setting/profile">编辑</f7-link>
      </f7-nav-right>
    </f7-navbar> -->
    <qm-currentcy-navbar title="我的资料">
      <template #nav-right>
        <f7-link href="/setting/profile">
        <f7-icon f7="gear_alt_fill" color="black"></f7-icon>
        </f7-link>
      </template>
    </qm-currentcy-navbar>
    <f7-block strong class="no-margin-top myInfo">
      <f7-row>
        <f7-col class="text-align-center head-portrait">
          <img
            src="../../assets/img/user.png"
            class="user_img"
            style="width: 100px; height: 100px; border-radius: 50px"
          />
        </f7-col>
      </f7-row>
      <f7-row>
        <f7-col class="text-align-center">
          <label>{{ user.userName }}</label>
        </f7-col>
      </f7-row>
      <f7-row class="margin-top myInfo_tip">
        <f7-col class="text-align-center">
          <f7-link
            href="/setting/qrcode"
            icon-material="crop_free"
            text="二维码名片"
          ></f7-link>
        </f7-col>
        <f7-col class="text-align-center">
          <f7-link
            href="/setting/password"
            icon-material="lock_open"
            text="修改密码"
          ></f7-link>
        </f7-col>
      </f7-row>
    </f7-block>
    <f7-list inline-labels class="form-right userlist userlist1">
      <!-- <f7-list-item>
                <f7-icon material="contacts" slot="media"></f7-icon>
                <f7-label>部门</f7-label>
                <f7-input type="text" :value="user.departmentName" readonly></f7-input>
      </f7-list-item>-->
      <!-- <f7-list-item>
        <f7-list-input
          label="邮箱"
          type="text"
          :value="user.profile.email"
          readonly
        >
          <f7-icon material="email" slot="media"></f7-icon>
        </f7-list-input>
      </f7-list-item> -->
      <qm-field label="邮箱" v-model="user.profile.email" readonly clearable>
        <template #left-icon>
          <f7-icon material="email" slot="media"></f7-icon>
        </template>
      </qm-field>
      <!-- <f7-list-item>
        <f7-list-input
          label="手机"
          type="text"
          :value="user.profile.mobile"
          readonly
        >
          <f7-icon material="call" slot="media"></f7-icon>
        </f7-list-input>
      </f7-list-item> -->
      <qm-field label="手机" v-model="user.profile.mobile" clearable readonly>
        <template #left-icon>
          <f7-icon material="phone_fill" slot="media"></f7-icon>
        </template>
      </qm-field>
      <!--
      <f7-list-item>
        <f7-list-input
          label="性别"
          type="text"
          :value="user.profile.gender == 0 ? '男' : '女'"
          readonly
        >
          <f7-icon material="people_outline" slot="media"></f7-icon>
        </f7-list-input>
      </f7-list-item> -->
      <qm-field label="姓名" v-model="user.userName" readonly clearable>
        <template #left-icon>
          <f7-icon material="contacts" slot="media"></f7-icon>
        </template>
      </qm-field>
      <!-- <f7-list-item>
        <f7-list-input
          label="生日"
          type="text"
          :value="user.profile.birthday | date"
          readonly
        >
          <f7-icon material="cake" slot="media"></f7-icon>
        </f7-list-input>
      </f7-list-item> -->
      <qm-field label="生日" v-model="user.profile.birthday" readonly clearable>
        <template #left-icon>
          <f7-icon material="cake" slot="media"></f7-icon>
        </template>
      </qm-field>
    </f7-list>
  </f7-page>
</template>
<script>
import controller from "../../libs/framework/controller";

export default class instance extends controller {
  async getViewModel() {
    let user = await this.$framework.account.getUser();
    this.bind({ user: user });
  }

  mixin() {
    return {
      mounted() {
        if (this.user.profile && this.user.profile.photoUrl) {
          vue.$framework.resourceLoader
            .load(this.user.profile.photoUrl)
            .then((path) => {
              // 返回的是图片的网络路径，可直接设置在img的src属性上
              if (window.qmplus.isWeb()) {
                this.super.$(".user_img").attr("src", path);
              } else {
                window.qmplus.io.getRemoteURL(path).then((p) => {
                  this.super.$(".user_img").attr("src", p);
                });
              }
            });
        }
      },
    };
  }
}
</script>
<style lang="less" scoped>
.md .navbar a.link {
  padding: 0px;
  margin: 0px;
  font-size: 15px;
  min-width: auto;
}
/deep/ .van-field__left-icon {
  margin-right: 33px;
}
/deep/ .navbar a.link{
  height: auto;
}
</style>
